<%--
  Created by IntelliJ IDEA.
  User: rcg
  Date: 2022/10/11
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
   <div id="app">
       <el-table
               :data="tableData"
               border
               style="width: 100%"
               :cell-style="styleBack"
               :header-cell-style="getRowClass"
       >

           <el-table-column
                   prop="roleId"
                   label="编号"
                   width="100">
           </el-table-column>

           <el-table-column
                   prop="roleName"
                   label="名称"
                   width="180">
           </el-table-column>


           <el-table-column
                   prop="rolePosition"
                   label="职位">
           </el-table-column>

           <el-table-column
                   prop="roleDesc"
                   label="描述">
           </el-table-column>

           <el-table-column label="操作">
               <template slot-scope="scope">
                   <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
                   <el-button @click="update(scope.row)" type="warning" size="small">编辑</el-button>
                   <el-button type="primary" size="small" @click="showRoleDialog(scope.row.roleId)">分配权限</el-button>
               </template>
           </el-table-column>
       </el-table>
        <%--为用户分配角色--%>
       <el-dialog
               title="分配权限"
               :visible.sync="dialogVisible01"
               width="30%"
               :before-close="handleClose">

           <el-tree
                   :data="data"
                   show-checkbox
                   node-key="pId"
                   ref="rootTree"
                    id="d"
                   :props="defaultProps">
           </el-tree>

           <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
       </el-dialog>



       <!--修改的弹出层dialogVisible:控制对话框的显示和隐藏-->
       <el-dialog
               title="修改提示"
               :visible.sync="dialogVisible"
               width="30%"
       >
           <!--:model:绑定表单数据-->
           <el-form label-width="80px" :model="editForm">


               <el-form-item label="编号" prop="roleId" v-if="false">
                   <el-input v-model="editForm.roleId"></el-input>
               </el-form-item>


               <el-form-item label="名称" prop="roleName">
                   <el-input v-model="editForm.roleName"></el-input>
               </el-form-item>

               <el-form-item label="职位" prop="rolePosition">
                   <el-input v-model="editForm.rolePosition"></el-input>
               </el-form-item>

               <el-form-item label="描述" prop="roleDesc">
                   <el-input v-model="editForm.roleDesc"></el-input>
               </el-form-item>


           </el-form>

           <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
                      </span>
       </el-dialog>







   </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
          data:{
              //定义修改表单的数据变量
              editForm: {},
               tableData:[],
               currentPage:1,
               pageSize:10,
               total:0,
               roleVo:{},
               dialogVisible01:false,
              dialogVisible: false,
                //树形结构

              data: [

              ],

              checkIds:[],

              defaultProps: {
                  children: 'children',
                  label: 'pName'
              },



          },

          created(){
             this.initTable();
              this.initLeftMenu();
          },
          methods:{

              //修改角色
              update(row){
                  this.dialogVisible=true
                  //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                  let parse = JSON.parse(JSON.stringify(row));
                  this.editForm = parse;
              },
              //确认修改
              confirmUpdate() {
                  axios.post("/role/update", this.editForm).then(result => {
                      if (result.data.code === 200) {
                          this.$message.success("修改权限信息成功")
                          //关闭弹出层
                          this.dialogVisible = false;
                          //重新加在表格数据
                          this.initTable();
                      }
                  })
              },

              //角色的删除
              handleClick(row){

                  console.log(row.roleId)
                  axios.get("/role/del?roleId="+row.roleId).then(resp=>{
                     if(resp.data.code===200){
                         this.$message.success("删除角色成功");
                         this.initTable();
                     }
                  })

              },

              //确认分配角色
              qr(){
                  //获取被选中的权限ids
                 let checkIds=this.$refs.rootTree.getCheckedKeys();
                 let halfIds=this.$refs.rootTree.getHalfCheckedKeys();
                  let ids=checkIds.concat(halfIds);
                  axios.post("/permission/qr?roleId="+this.roleId+"&permissionIds="+ids).then(resp=>{
                       this.$message.success("分配成功");
                       this.dialogVisible01=false;
                      this.$refs.rootTree.setCheckedKeys([]);
                  })
              },

              showRoleDialog(roleId){
                  this.roleId=roleId;
                 this.dialogVisible01=true;
                  //1. 查询所有的权限
                  //2. 当前角色具有的权限ID
                  axios.get("/permission/list?roleId="+roleId).then(resp=>{

                        this.data=resp.data.data.firsts;
                        this.checkIds=resp.data.data.permissionIds;
                      //默认选中的树的数据
                        setTimeout(() =>{
                            resp.data.data.permissionIds.forEach(value => {
                              this.$refs.rootTree.setChecked(value, true, false);
                            })}, 100)

                  })

              },


              //关闭对话
              handleClose(done) {
                  this.$confirm('确认关闭？')
                      .then(_ => {
                          done();
                      })
                      .catch(_ => {
                      });
              },

              initLeftMenu(){
                  axios.get("/permission/leftPermission").then(resp=>{
                      this.treedata=resp.data.data;
                      console.log(this.treedata)
                  })

              },

               initTable(){
                   axios.post("/role/all?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.roleVo).then(resp=>{
                         this.tableData=resp.data.data.list;
                         this.total=resp.data.data.total;
                   });

               },
              // 表格奇偶层样式
              styleBack({ row, column, rowIndex, columnIndex }) {
                  if ((rowIndex + 1) % 2 === 0) {
                      return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                  } else {
                      return "background:#042831; color:#fff;border:1px solid #042831";
                  }
              },
              // 表头样式
              getRowClass({ rowIndex }) {
                  return "background:#053c4a; color:#fff;border:3px solid #053c4a";
              },
          }
     })
</script>
</html>
